<template>
<div class="Tqrzq">
    <div class="gjguTC">
        <label color="#616E7E" class="sc-1bjkklg-0 hDuZmn">选择业务属性</label>
    </div>
    <div class="hvqMiX">
        <div class="jcvvQC" @click="selectPanel(index)" v-for="(item , index) in attrList" :class="{'selected':index == selectItem}" :key="index">
            <span class="icon-opt">
                <i class="fas fa-check"></i>
            </span>
            {{ item.name }}
        </div>
    </div>
</div>
</template>

<script>

export default {
    data() {
        return {
            selectItem: -1 ,
            attrList: [
                {name: '前后端'},
                {name: '单点'},
                {name: '微服务'},
                {name: '容器化'},
            ]
        };
    },
    methods: {
        selectPanel(index){
            if(index == this.selectItem){
                this.selectItem = -1 ;
            }else{
                this.selectItem = index ;
            }
        }
    }
};

</script>

<style scoped lang="scss">
@import '@/asserts/css/build/component.scss';


.selected{
    .icon-opt {
        opacity: 1 !important ;
        i{
            opacity: 1 !important ;
            transition: opacity .5s;
        }
    }
}

.icon-opt {
    display: block;
    border: 2px solid #e4e4e4;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin-top: 8px;
    border-radius: 50%;
    cursor: pointer;
    float:left ;
    margin-right: 10px;
    color: #005bd4;
    text-align: center;
    opacity: 0.3 ;

    i{
        opacity: 0 ;
    }
}

</style>


